<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="left" rightText="帮助" color="#ffffff"
			background-color="rgb(255, 61, 0)" @clickLeft="onClickLeft" @clickRight="onClickRight">
			<view class="nav-bar-title" @tap="onGame">
				<uni-text>{{state.game_titles[state.game-1]}}</uni-text>
				<text class="cicon-drop-down" style="font-size: 25px;" />
			</view>
			
		</uni-nav-bar>
		
		<!-- 选号组件 -->
		<xuanhao-index/>
		
		<view class="bottom-bar">
			<view class="bottom-bar-foot">
				<view class="bottom-bar-foot-top">
					<image src="@/static/images/del.png"></image>
				</view>
				<view class="bottom-bar-foot-xuan">
					<view>
						已选
						<text class="text-red">9</text>
						场
					</view>
					<view>
						<text class="text-gray">请选择9场比赛</text>
					</view>
				</view>
				<view class="right">
					<view class="bottom-bar-foot-next">选好了</view>
				</view>
			</view>
		</view>
		<!-- 防止最后的比赛看不到，添加一个view 暂时没有好的解决办法，后期有时间再优化 、-->
		<view style="height: 60px;"></view>
		<su-popup :show="state.showModel" type="top" @close="onCancel" :zIndex="50">
			<view style="padding-top: 70px;padding-bottom: 20px;text-align: center;display: flex;justify-content: space-around;">
				<view class="changeTis-view"  :class="state.game==1?'changeTis-view-xuan':''" 	@tap="onChoose(1)">25066期</view>
				<view class="changeTis-view" :class="state.game==2?'changeTis-view-xuan':''"	@tap="onChoose(2)">25067期</view>
				<view class="changeTis-view" :class="state.game==3?'changeTis-view-xuan':''"	@tap="onChoose(3)">25068期</view>
				<view class="changeTis-view" :class="state.game==4?'changeTis-view-xuan':''" 	@tap="onChoose(4)">25069期</view>
			</view>
		</su-popup>
	</view>

</template>


<script setup>
	import sheep from '@/sheep';
	  import xuanhaoIndex from './components/xuanhao-index.vue';
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';

	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;

	onPageScroll((e) => {
		state.scrollTop = e.scrollTop <= 100;
	});

	const state = reactive({
		showModel: false,
		scrollTop: false,
		currentTab: 0,
		gameCurrentTab: 0,
		loadStatus: '',
		pagination: {
			list: [],
			total: 0,
			pageNo: 1,
			pageSize: 8,
		},
		game:1,
		game_titles:["任选九25066期","任选九25067期","任选九25068期","任选九25069期"]
	});

	// 打开选择游戏玩法
	function onGame() {
		if(state.showModel){
			state.showModel = false;
		}else{
			state.showModel = true;
		}
		
	}

	// 选择确认游戏玩法刷新页面
	function onConfirm() {
		state.showModel = false;
	}

	function onCancel() {
		state.showModel = false;
	}
	function onChoose(e){
		state.game = e;
		state.showModel = false;
	}
	const tabMaps = [{
			name: '命中率',
			value: 0,
		},
		{
			name: '跟单人气',
			value: 1, // 待结算
		},
		{
			name: '赔率',
			value: 2, // 已结算
		}, {
			name: '自购金额',
			value: 3, // 已结算
		}, {
			name: '我的订阅',
			value: 4, // 已结算
		}
	];
	const gameTabMaps = [{
			name: '足球',
			value: 0,
		},
		{
			name: '篮球',
			value: 1, // 待结算
		},
		{
			name: '数字彩',
			value: 2, // 已结算
		}
	];


	// 切换选项卡
	function onTabsChange(e) {
		resetPagination(state.pagination);
		state.currentTab = e.index;
	}
	// 切换选项卡
	function onGameTabsChange(e) {
		resetPagination(state.pagination);
		state.gameCurrentTab = e.index;
	}
	
	// 左侧按钮：返回上一页或首页
	function onClickLeft() {
		  const hasHistory = sheep.$router.hasHistory();
	  if (hasHistory) {
	    sheep.$router.back();
	  } else {
	    sheep.$router.go('/pages/index/index');
	  }
	}
	
	// 右侧按钮：打开快捷菜单
	function onClickRight() {
	  console.log("点击帮助了")
	}
	// 获取订单列表
	async function getOrderList() {
		state.loadStatus = 'loading';
		const tab = tabMaps[state.currentTab];
		const queryParams = {
			pageSize: state.pagination.pageSize,
			pageNo: state.pagination.pageNo,
			bizType: 1, // 获得推广佣金
			status: tab.value,
		}
		if (tab.value < 0) {
			delete queryParams.status;
		}
		const {
			code,
			data
		} = await BrokerageApi.getBrokerageRecordPage(queryParams);
		if (code !== 0) {
			return;
		}
		state.pagination.list = _.concat(state.pagination.list, data.list);
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
		if (state.currentTab === 0) {
			state.totals = data.total;
		}
	}

	onLoad(() => {});

	// 加载更多
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
</script>


<style>
	.nav-bar-title {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		text-align: center;
		padding-left: 26%;
		padding-top: 10px;
	}

	.bottom-bar {
		width: 100vw;
		position: fixed;
		z-index: 49;
		right: 0;
		bottom: 0;
	}

	.bottom-bar-foot {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		height: 55px;
		line-height: 25px;
		box-shadow: -1px -6px 7px 0px rgb(17 12 12 / 25%);
		text-align: center;
		background-color: #ffe8e8;
	}

	.bottom-bar-foot-top {
		margin-left: 9px;
		display: flex;
		align-items: center;
	}

	.bottom-bar-foot-next {
		width: 30vw;
		line-height: 55px;
		background-color: #ff3d00;
		font-size: 16px;
		color: #fff;
	}

	.bottom-bar .bottom-bar-foot .bottom-bar-foot-top uni-image {
		width: 30px;
		height: 30px;

	}

	.bottom-bar-foot-xuan {
		font-size: 14px;
	}
	.changeTis-view{
	    width: 30vw;
	    height: 35px;
	    line-height: 35px;
	    text-align: center;
	    margin: 5px;
	    border: 1px solid #b5b5b5;
	}
	.changeTis-view-xuan{
	    border: 1px solid red;
		color: red;
	}
	.text-gray{
		color: #b5b5b5;
	}
	.text-red{
		color: #ff3d00;
	}
</style>